<template>
	<view :class="[back ? 'back' : '', 'screen_box']">
		<block v-if="showOne">
			<input :class="[backStyle ? 'uni-input' : 'uni-input-active','f500','s24']" v-model="screenVal"
				placeholder-style="color:#ccc;" @tap="focus" :disabled="disabled" placeholder="商品名/店铺名/商品种类/关键字" />
			<view class="screen_img">
				<image class="w100 h100" src="../static/shopping/search.png" mode=""></image>
			</view>
		</block>
		<!-- <view class="screen_list_box flex" v-if="showTwo">
			<view class="list_box flex" v-for="(item,index) in screen_list" :key="index" @click="onActive(index)">
				<view :class="[listIndex == index ? 'active_txt' : '', 'txt s24 f500 family']">
					{{item.txt}}
				</view>
				<image class="img" :src="item.img" mode=""></image>
			</view>
		</view> -->
	</view>
</template>

<script>
	export default {
		name: "screenList",
		props: {
			screen_list: {
				default: [],
				type: Array
			},
			pages: {
				default: false,
				type: Boolean
			},
			showOne: {
				default: false,
				type: Boolean
			},
			showTwo: {
				default: false,
				type: Boolean
			},
			back: {
				default: true,
				type: Boolean
			},
			backStyle: {
				default: false,
				type: Boolean
			},
			disabled: {
				default: false,
				type: Boolean
			},
			typePage: {
				type: String,
				default: 'index'
			},
			typeDress: {
				type: [String,Number],
				default: 0
			},
			shopId: {
				type: [String,Number],
				default: 0
			},
			
		},
		data() {
			return {
				listIndex: 0,
				screenVal: '',
				type: true
			}
		},
		methods: {
			onActive(index) {
				this.listIndex = index
				let flag = ''
				if (this.listIndex == 0) {
					flag = "views"
				} else if (this.listIndex == 1) {
					flag = "updatetime"
				} else if (this.listIndex == 2) {
					flag = "price"
				} else if (this.listIndex == 3) {
					flag = "praise"
				}
				this.clickData(flag)
			},
			focus() {
				if(this.pages == true) {
					this.type = false
					uni.navigateTo({
						url: '/pages/filePages/screen/screen?shopId='+this.shopId
					})
				}
			},
			clickData(type) {
				uni.showLoading({
					title: "加载中..."
				})
				this.$request({
					url: this.typeDress == 0 ? 'product/lists' : 'package/lists',
					method: 'POST',
					data: {
						sort: type,
						order: "desc",
						shop_id: this.typePage == 'index' ? '' : this.$store.state.shop.id
					}
				}).then(res => {
					this.$emit('setData', res.data.data.data,2)
					uni.hideLoading()
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.screen_box {
		height: 70upx;
		padding: 26upx 32upx 26upx 32upx;
		margin-top: 6upx;

		.uni-input {
			width: 608upx;
			height: 68upx;
			background: #FFFFFF;
			border-radius: 8upx 8upx 8upx 8upx;
			border: 1upx solid #666;
			font-family: PingFang SC-Medium, PingFang SC;
			color: #CCCCCC;
			padding-left: 78upx;
		}

		.uni-input-active {
			width: 608upx;
			height: 68upx;
			background: #F4F4F4;
			border-radius: 8upx 8upx 8upx 8upx;
			font-family: PingFang SC-Medium, PingFang SC;
			color: #CCCCCC;
			padding-left: 78upx;
		}

		.screen_img {
			width: 40upx;
			height: 40upx;
			position: relative;
			left: 24upx;
			top: -56upx;
		}

		.screen_list_box {
			height: 0;
			.list_box {
				margin-left: 53upx;

				.txt {
					color: #999999;
				}

				.active_txt {
					color: #333333;
				}

				.img {
					width: 32upx;
					height: 32upx;
					display: inline-block;
					margin-left: 4upx;
				}
			}

			.list_box:nth-child(1) {
				margin-left: 0;
			}
		}
	}
</style>
